@dss-kit/ui-kit 0.3.6 → 0.3.8

package/dist/components/builders/Modal/Modal.js

@@ -1,55 +1,55 @@
-import { jsx as t, jsxs as M } from "react/jsx-runtime";
-import { cx as i } from "@emotion/css";
-import { forwardRef as B, useEffect as c, useCallback as f, useRef as D } from "react";
-import N from "../../../assets/svg/modal/close.svg.js";
-import { ModalContext as z } from "./context.js";
-import { styles as n } from "./styles.js";
-import { Portal as E } from "../Portal/Portal.js";
-import { Box as s } from "../Box/Box.js";
+import { jsx as t, jsxs as z } from "react/jsx-runtime";
+import { cx as s } from "@emotion/css";
+import { forwardRef as D, useEffect as p, useCallback as d, useRef as N } from "react";
+import B from "../../../assets/svg/modal/close.svg.js";
+import { ModalContext as E } from "./context.js";
+import { styles as i } from "./styles.js";
+import { Portal as I } from "../Portal/Portal.js";
+import { Box as l } from "../Box/Box.js";
 import { IconButton as P } from "../../controls/IconButton/IconButton.js";
-import { theme as j } from "../../../utils/theme/index.js";
-const C = B(
+import { theme as f } from "../../../utils/theme/index.js";
+const j = D(
   ({
     isOpen: o,
     onClose: r,
     overlayClassName: y,
-    modalClassName: p,
-    absoluteCloseButtonClassName: w,
+    modalClassName: w,
+    absoluteCloseButtonClassName: g,
     size: h = "md",
     closeOnBackdropClick: m = !0,
     closeOnEsc: u = !0,
-    disableBodyScroll: l = !0,
-    showAbsoluteCloseButton: g,
+    disableBodyScroll: a = !0,
+    showAbsoluteCloseButton: x,
     children: v
-  }, x) => {
-    c(() => {
-      if (l && o && typeof window < "u" && typeof document < "u") {
+  }, k) => {
+    p(() => {
+      if (a && o && typeof window < "u" && typeof document < "u") {
         const e = window.getComputedStyle(document.body).overflow;
         return document.body.style.overflow = "hidden", () => {
           document.body.style.overflow = e;
         };
       }
-    }, [o, l]);
-    const d = f(
+    }, [o, a]);
+    const n = d(
       (e) => {
         e.key === "Escape" && r();
       },
       [r]
     );
-    c(() => {
+    p(() => {
       if (typeof window < "u" && typeof document < "u" && u && o)
-        return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
-    }, [o, u, d]);
-    const a = D(!1), k = f((e) => {
-      a.current = e.target === e.currentTarget;
-    }, []), b = f(
+        return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+    }, [o, u, n]);
+    const c = N(!1), b = d((e) => {
+      c.current = e.target === e.currentTarget;
+    }, []), M = d(
       (e) => {
-        m && e.target === e.currentTarget && a.current && r();
+        m && e.target === e.currentTarget && c.current && r();
       },
       [m, r]
     );
-    return o ? /* @__PURE__ */ t(E, { children: /* @__PURE__ */ t(z.Provider, { value: { isOpen: o, onClose: r }, children: /* @__PURE__ */ t(
-      s,
+    return o ? /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(E.Provider, { value: { isOpen: o, onClose: r }, children: /* @__PURE__ */ t(
+      l,
       {
         position: "fixed",
         top: 0,
@@ -59,33 +59,39 @@ const C = B(
         row: !0,
         center: !0,
         flex: 1,
-        onMouseDown: k,
-        onClick: b,
-        backgroundColor: j.color.fill.bgOverlayPrimary,
-        className: i(n.overlay, y),
+        onMouseDown: b,
+        onClick: M,
+        backgroundColor: f.color.fill.bgOverlayPrimary,
+        className: s(i.overlay, y),
         zIndex: 1,
-        children: /* @__PURE__ */ M(
-          s,
+        children: /* @__PURE__ */ z(
+          l,
           {
-            ref: x,
-            className: i(
-              n.modal,
-              n[`size_${h}`],
-              p
+            ref: k,
+            className: s(
+              i.modal,
+              i[`size_${h}`],
+              w
             ),
             relative: !0,
             children: [
-              g && /* @__PURE__ */ t(
-                P,
+              x && /* @__PURE__ */ t(
+                l,
                 {
-                  className: i(
-                    n.closeButton,
-                    w
-                  ),
-                  onClick: r,
-                  color: "neutral",
-                  size: "xs",
-                  children: /* @__PURE__ */ t(N, {})
+                  position: "absolute",
+                  top: f.spacing.lg,
+                  right: f.spacing.lg,
+                  zIndex: 1,
+                  children: /* @__PURE__ */ t(
+                    P,
+                    {
+                      className: g,
+                      onClick: r,
+                      color: "neutral",
+                      size: "xs",
+                      children: /* @__PURE__ */ t(B, {})
+                    }
+                  )
                 }
               ),
               v
@@ -96,7 +102,7 @@ const C = B(
     ) }) }) : null;
   }
 );
-C.displayName = "Modal";
+j.displayName = "Modal";
 export {
-  C as Modal
+  j as Modal
 };

package/dist/components/builders/Modal/ModalHeader/ModalHeader.js

@@ -1,21 +1,21 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { forwardRef as B } from "react";
-import W from "../../../../assets/svg/modal/close.svg.js";
-import { useModalContext as v } from "../context.js";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import B from "../../../../assets/svg/modal/close.svg.js";
+import { useModalContext as W } from "../context.js";
 import { Box as t } from "../../Box/Box.js";
-import { theme as o } from "../../../../utils/theme/index.js";
-import { Text as a } from "../../Text/Text.js";
+import { theme as r } from "../../../../utils/theme/index.js";
+import { Text as i } from "../../Text/Text.js";
 import { IconButton as M } from "../../../controls/IconButton/IconButton.js";
-const j = B(
+const j = v(
   ({
-    title: i,
-    subtitle: l,
+    title: l,
+    subtitle: a,
     w: m = "full",
     p: s,
-    py: n,
-    px: d = o.spacing["2xl"],
-    pt: c = o.spacing["2xl"],
-    pb: p = o.spacing.lg,
+    py: d,
+    px: n = r.spacing["2xl"],
+    pt: c = r.spacing["2xl"],
+    pb: p = r.spacing.lg,
     row: f = !0,
     justifyContent: h = "space-between",
     showCloseButton: g = !1,
@@ -24,57 +24,57 @@ const j = B(
     subtitleClassName: u,
     closeButtonClassName: N
   }, y) => {
-    const { onClose: C } = v();
+    const { onClose: C } = W();
     return /* @__PURE__ */ e(
       t,
       {
         w: m,
         p: s,
-        py: n,
-        px: d,
+        py: d,
+        px: n,
         pt: c,
         pb: p,
         row: f,
         justifyContent: h,
         ref: y,
-        borderColor: o.color.border.neutralAlphaBasic,
+        borderColor: r.color.border.neutralAlphaBasic,
         borderWidth: 0,
         borderBottomWidth: 1,
         borderStyle: "solid",
         className: x,
         children: [
-          /* @__PURE__ */ e(t, { gap: o.spacing.sm, children: [
-            /* @__PURE__ */ r(
-              a,
+          /* @__PURE__ */ e(t, { gap: r.spacing.sm, children: [
+            /* @__PURE__ */ o(
+              i,
               {
                 variant: "title-3",
                 colorName: "primary",
                 fontWeight: "semibold",
                 className: b,
-                children: i
+                children: l
               }
             ),
-            /* @__PURE__ */ r(
-              a,
+            /* @__PURE__ */ o(
+              i,
               {
                 variant: "body-1",
                 colorName: "tertiary",
                 fontWeight: "medium",
                 className: u,
-                children: l
+                children: a
               }
             )
           ] }),
-          g && /* @__PURE__ */ r(
+          g && /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
             M,
             {
               onClick: C,
               color: "neutral",
               className: N,
               size: "xs",
-              children: /* @__PURE__ */ r(W, {})
+              children: /* @__PURE__ */ o(B, {})
             }
-          )
+          ) })
         ]
       }
     );

package/dist/components/builders/Modal/styles.d.ts

@@ -1,7 +1,6 @@
 export declare const styles: {
     overlay: string;
     modal: string;
-    closeButton: string;
     size_lg: string;
     size_md: string;
     size_sm: string;

package/dist/components/builders/Modal/styles.js

@@ -1,7 +1,7 @@
 import { css as i, keyframes as a } from "@emotion/css";
-import { bp as t } from "../../../styles/utils/breakpoints.js";
+import { bp as r } from "../../../styles/utils/breakpoints.js";
 import { theme as o } from "../../../utils/theme/index.js";
-const n = a`
+const t = a`
   0% {
     opacity: 0;
     transform: scale(0.95);
@@ -10,29 +10,23 @@ const n = a`
     opacity: 1;
     transform: none;
   }
-`, l = {
+`, e = {
   overlay: i({
     backdropFilter: "blur(5px)"
   }),
   modal: i({
     animationDuration: "0.2s",
     animationTimingFunction: "ease-in-out",
-    animationName: n,
+    animationName: t,
     maxWidth: `calc(100vw - ${o.spacing["3xl"]})`,
     maxHeight: `calc(100vh - ${o.spacing["7xl"]} - ${o.spacing["7xl"]})`,
     borderRadius: o.cornerRadius["2xl"],
     backgroundColor: o.color.fill.bgPrimary,
     boxShadow: `0 4px 20px 0 ${o.color.effect.shadowS}`,
-    [t.sm()]: {
+    [r.sm()]: {
       flex: 1
     }
   }),
-  closeButton: i({
-    position: "absolute",
-    zIndex: 1,
-    top: o.spacing.lg,
-    right: o.spacing.lg
-  }),
   size_lg: i({
     width: 874
   }),
@@ -44,5 +38,5 @@ const n = a`
   })
 };
 export {
-  l as styles
+  e as styles
 };

package/dist/components/builders/Table/TablePagination/TablePagination.js

@@ -6,10 +6,10 @@ import B from "../../../../assets/svg/table/chevron-right.svg.js";
 import U from "../../../../assets/svg/table/dots.svg.js";
 import { getPageNumbers as X } from "./TablePagination.utils.js";
 import { Button as M } from "../../../controls/Button/Button.js";
+import { IconButton as j } from "../../../controls/IconButton/IconButton.js";
 import { Box as r } from "../../Box/Box.js";
 import { Select as Y } from "../../../controls/Select/Select.js";
 import { theme as Z } from "../../../../utils/theme/index.js";
-import { IconButton as j } from "../../../controls/IconButton/IconButton.js";
 import { Text as _ } from "../../Text/Text.js";
 const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
   pageIndex: o,

package/dist/components/charts/LineChart/LineChart.js

@@ -1,39 +1,41 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { cx as h } from "@emotion/css";
-import { Chart as b, Tooltip as C } from "@highcharts/react";
+import { Chart as b } from "../../../node_modules/@highcharts/react/Highcharts.js";
+import "../../../node_modules/@highcharts/react/options/Title.js";
+import { Tooltip as C } from "../../../node_modules/@highcharts/react/options/Tooltip.js";
 import { useRef as T, useEffect as y, useMemo as o } from "react";
 import { buildLineChartOptions as E, buildTooltipProps as L } from "./utils.js";
 const j = ({
   color: n = "positive",
-  data: s = [],
-  xAxis: i,
-  yAxis: a,
+  data: i = [],
+  xAxis: s,
+  yAxis: m,
   containerProps: e,
-  highcharts: p,
+  highcharts: l,
   tooltip: r,
-  className: f,
-  style: l
+  className: p,
+  style: f
 }) => {
   const t = T(null);
   y(() => () => {
     typeof t == "object" && t?.current?.chart && t.current.chart.destroy();
   }, []);
-  const c = o(() => E(n, s, i, a, !!r), [n, s, i, a, r]), u = o(() => r ? L(r) : { enabled: !1 }, [r]), d = o(
+  const c = o(() => E(n, i, s, m, !!r), [n, i, s, m, r]), u = o(() => r ? L(r) : { enabled: !1 }, [r]), d = o(
     () => ({
       ...e,
-      className: h(e?.className, f),
-      style: { ...e?.style, ...l }
+      className: h(e?.className, p),
+      style: { ...e?.style, ...f }
     }),
-    [e, f, l]
+    [e, p, f]
   );
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ a(
     b,
     {
-      highcharts: p,
+      highcharts: l,
       ref: t,
       options: c,
       containerProps: d,
-      children: /* @__PURE__ */ m(C, { ...u })
+      children: /* @__PURE__ */ a(C, { ...u })
     }
   );
 };

package/dist/components/charts/PieProgressChart/PieProgressChart.js

@@ -1,6 +1,8 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cx as p } from "@emotion/css";
-import { Chart as d, Title as C } from "@highcharts/react";
+import { jsx as f } from "react/jsx-runtime";
+import { cx as l } from "@emotion/css";
+import { Chart as d } from "../../../node_modules/@highcharts/react/Highcharts.js";
+import { Title as C } from "../../../node_modules/@highcharts/react/options/Title.js";
+import "../../../node_modules/@highcharts/react/options/Tooltip.js";
 import { forwardRef as P, useRef as y, useEffect as R, useMemo as n } from "react";
 import { buildPieProgressChartOptions as x } from "./utils.js";
 const b = P(
@@ -11,28 +13,28 @@ const b = P(
     label: a = (o) => `${o}%`,
     containerProps: t,
     className: i,
-    style: f
-  }, u) => {
-    const o = y(null), r = u || o;
+    style: m
+  }, p) => {
+    const o = y(null), r = p || o;
     R(() => () => {
       typeof r == "object" && r?.current?.chart && r.current.chart.destroy();
     }, [r]);
-    const h = n(() => x(e, s), [e, s]), l = n(
+    const u = n(() => x(e, s), [e, s]), h = n(
       () => ({
         ...t,
-        className: p(t?.className, i),
-        style: { ...t?.style, ...f }
+        className: l(t?.className, i),
+        style: { ...t?.style, ...m }
       }),
-      [t, i, f]
+      [t, i, m]
     );
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ f(
       d,
       {
         highcharts: c,
         ref: r,
-        options: h,
-        containerProps: l,
-        children: /* @__PURE__ */ m(C, { children: a?.(e) })
+        options: u,
+        containerProps: h,
+        children: /* @__PURE__ */ f(C, { children: a?.(e) })
       }
     );
   }

package/dist/components/controls/Button/Button.js

@@ -5,10 +5,10 @@ import { useMemo as o } from "react";
 import { cornerRadiusValues as u, baseButton as D, getVariantStyles as E, typeStyles as G, sizeValues as H } from "./styles.js";
 import { Loader as I } from "../../builders/Loader/Loader.js";
 import { AnimatedText as J } from "../../builders/Text/Text.js";
-import { Ripple as K } from "../../builders/Ripple/Ripple.js";
-import { theme as P } from "../../../utils/theme/index.js";
-import { Box as Q } from "../../builders/Box/Box.js";
-const { color: m } = P, ue = ({
+import { theme as K } from "../../../utils/theme/index.js";
+import { Box as P } from "../../builders/Box/Box.js";
+import { Ripple as Q } from "../../builders/Ripple/Ripple.js";
+const { color: m } = K, ue = ({
   disabled: n,
   loading: l,
   className: g,
@@ -95,7 +95,7 @@ const { color: m } = P, ue = ({
     }
   }, [s]);
   return /* @__PURE__ */ a(
-    Q,
+    P,
     {
       className: y(S, g),
       w: h,
@@ -131,7 +131,7 @@ const { color: m } = P, ue = ({
               ),
               R
             ] }),
-            /* @__PURE__ */ a(K, {})
+            /* @__PURE__ */ a(Q, {})
           ]
         }
       )

package/dist/components/controls/IconButton/IconButton.d.ts

@@ -1,2 +1,17 @@
-import { IIconButtonProps } from './IconButton.types';
-export declare function IconButton({ attr, children, className, type, color, size, ...props }: IIconButtonProps): import("react/jsx-runtime").JSX.Element;
+import { ComponentProps } from 'react';
+import { CustomType, NegativeType, NeutralType, PositiveType, PrimaryType, SecondaryType, Size, TransferType, WarningType } from '../../../types/tokens.types';
+export type IconButtonSize = Extract<Size, "xs" | "sm" | "md"> | CustomType;
+export type IconButtonColor = PrimaryType | SecondaryType | NegativeType | PositiveType | WarningType | TransferType | NeutralType | CustomType | "neutral-white" | "no-bg";
+export interface IconButtonProps extends ComponentProps<"button"> {
+    /**
+     * Размер кнопки.
+     * @default "md"
+     */
+    size?: IconButtonSize;
+    /**
+     * Цветовая схема (токен).
+     * @default "primary"
+     */
+    color?: IconButtonColor;
+}
+export declare function IconButton({ children, className, type, color, size, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/IconButton/IconButton.js

@@ -1,35 +1,28 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import p from "classnames";
-import { Ripple as c } from "../../builders/Ripple/Ripple.js";
-import { styles as a, sizeStyles as f, colorStyles as u } from "./styles.js";
-function j({
-  attr: o,
-  children: t,
-  className: r,
-  type: s = "button",
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { cx as p } from "@emotion/css";
+import { styles as l, sizeStyles as c, colorStyles as f } from "./styles.js";
+import { Ripple as u } from "../../builders/Ripple/Ripple.js";
+function d({
+  children: o,
+  className: t,
+  type: r = "button",
   color: m = "primary",
-  size: e = "md",
-  ...i
+  size: s = "md",
+  ...e
 }) {
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ i(
     "button",
     {
-      ...o,
-      ...i,
-      type: s,
-      className: p(
-        a,
-        f[e],
-        u[m],
-        r
-      ),
+      ...e,
+      type: r,
+      className: p(l, c[s], f[m], t),
       children: [
-        /* @__PURE__ */ n(c, {}),
-        t
+        /* @__PURE__ */ n(u, {}),
+        o
       ]
     }
   );
 }
 export {
-  j as IconButton
+  d as IconButton
 };

package/dist/components/controls/IconButton/index.d.ts

@@ -1,2 +1,2 @@
-export * from './IconButton';
-export type * from './IconButton.types';
+export type { IconButtonColor, IconButtonProps, IconButtonSize, } from './IconButton';
+export { IconButton } from './IconButton';